<template>
  <vxe-modal
    v-model="visible"
    ref="mymodal"
    showFooter
    esc-closable
    title="新增用户"
    width="640"
    @close="closeFrom"
    @hide="closeFrom"
    remember
  >
    <div class="form-contianer">
      <el-form ref="newForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="登录账号" prop="account">
          <el-input v-model="form.account" name="account" placeholder="输入账号"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="form.password" name="password" placeholder="输入密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="form.checkPass" name="checkPass" placeholder="再次输入密码"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="form.name" placeholder="输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="form.mobile" placeholder="输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="权限分配" prop="auth">
          <el-checkbox-group v-model="form.auth" @change="groupChange">
            <el-checkbox v-for="item in auths" :label="item.name" :key="item.id" name="auth"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFrom" size="small">取 消</el-button>
      <el-button
        type="primary"
        @click.native.prevent="submitHandle"
        :loading="loading"
        size="small"
      >创 建</el-button>
    </div>
  </vxe-modal>
</template>

<script>
import { addUser } from '@/api/group'
export default {
  name: 'AddUser',
  props: {
    addUserDialog: {
      type: Boolean
    },
    auths: {
      type: Array,
      default: []
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    const validPassWord = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.form.checkPass !== '') {
          this.$refs.newForm.validateField('checkPass')
        }
        callback()
      }
    }
    const validPassWord2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validMobile = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } else if (/^1[34578]\d{9}$/.test(value) === false) {
        callback(new Error('手机号格式错误'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      loading: false,
      form: {
        account: '',
        password: '',
        checkPass: '',
        name: '',
        mobile: '',
        auth: [],
        roles_id: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入登录账号', trigger: 'blur' },
          { min: 6, message: '账号长度不能小于6', trigger: 'blur' }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validPassWord }
        ],
        checkPass: [
          { required: true, trigger: 'blur', validator: validPassWord2 }
        ],
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, message: '名字太短', trigger: 'blur' }
        ],
        mobile: [{ required: true, trigger: 'blur', validator: validMobile }],
        auth: [
          {
            type: 'array',
            required: true,
            message: '请选择角色权限',
            trigger: 'change'
          }
        ]
      }
    }
  },
  watch: {
    addUserDialog(val) {
      this.visible = val
    }
  },
  methods: {
    closeFrom() {
      this.$emit('update:addUserDialog', false)
    },
    submitHandle() {
      const that = this
      this.$refs.newForm.validate((valid) => {
        if (valid) {
          this.loading = true
          addUser(this.form)
            .then((res) => {
              console.log(res)
              this.loading = false
              this.$message({
                message: res.msg,
                type: 'success'
              })
              // that.list.push(that.form)
              setTimeout(() => {
                that.closeFrom()
                this.$parent.initGetUsers()
              }, 1000)
            })
            .catch((res) => {
              this.loading = false
              console.log('失败了')
            })
        } else {
          this.loading = false
          return false
        }
      })
    },
    groupChange(e) {
      if (this.form.auth.length > 1) {
        this.form.auth.shift()
        const va = e[0]
        for (const i in this.auths) {
          if (va === this.auths[i].name) {
            console.log(this.auths[i].id)
            this.form.roles_id = this.auths[i].id
          }
        }
      } else {
        const va = e[0]
        for (const i in this.auths) {
          if (va === this.auths[i].name) {
            console.log(this.auths[i].id)
            this.form.roles_id = this.auths[i].id
          }
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-contianer {
  padding: 25px 30px;
}
</style>